<template>
  <div class="container">
    <van-nav-bar title="支付密码" @click-left="$router.back()">
      <template #left>
        <van-icon name="arrow-left" size="1rem" color="black" />
      </template>
    </van-nav-bar>
    <div class="content">
      <div class="prompt">
        验证码已发送155****4010请在下方
        输入4位数字验证码
      </div>
      <div class="inputBox" @click="$refs.inputRef.focus()">
        <input type="text" ref="inputRef" v-model="inputVal" maxlength="4" />
        <ul class="numBox">
          <li :class="nextInx===0 && 'active'">
            <span>{{inputVal[0]}}</span>
          </li>
          <li :class="nextInx===1 && 'active'">
            <span>{{inputVal[1]}}</span>
          </li>
          <li :class="nextInx===2 && 'active'">
            <span>{{inputVal[2]}}</span>
          </li>
          <li :class="nextInx===3 && 'active'">
            <span>{{inputVal[3]}}</span>
          </li>
        </ul>
      </div>
      <div class="footer">
        <span>输入短信验证码</span>
        <button class="yesBtn">确认</button>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar, Icon } from "vant";
export default {
  components: {
    "van-nav-bar": NavBar,
    "van-icon": Icon
  },
  methods: {},
  data() {
    return {
      inputVal: ""
    };
  },
  computed: {
    nextInx() {
      return this.inputVal.length;
    }
  },
  mounted() {
    this.$refs.inputRef.focus();
  }
};
</script>

<style lang="less" scoped>
.container {
  background-color: #f7f7f7;
  .content {
    margin-top: 0.4rem;
    background-color: white;
    .prompt {
      padding-top: 2.4rem;
      margin: 0 auto;
      width: 60%;
      font-size: 0.7rem;
      text-align: center;
      color: #333;
    }
    .inputBox {
      padding: 1.2rem;
      position: relative;
      > input {
        box-sizing: border-box;
        height: 3rem;
        width: 100%;
        // color: transparent;
        position: absolute;
        z-index: -1;
        left: 0;
        // text-shadow: 0 0 0 #000;
      }
      .numBox {
        display: flex;
        justify-content: space-around;

        @keyframes flashLine {
          from {
            background-color: #999;
          }
          to {
            background-color: #ddd;
          }
        }
        .active {
          &::before {
            position: absolute;
            content: "";
            height: 40%;
            width: 1px;
            animation: flashLine 1s infinite;
          }
        }
        li {
          position: relative;
          height: 3rem;
          width: 22%;
          border: 1px solid #ddd;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .footer {
      text-align: center;
      span {
        display: block;
        font-size: 0.7rem;
        font-weight: 700;
        padding-bottom: 0.6rem;
      }
      .yesBtn {
        background-image: linear-gradient(to right, #ff7c96, #ff365e);
        padding: 0.4rem 4.2rem;
        color: white;
        border: none;
        border-radius: 0.8rem;
        font-size: 0.7rem;
      }
    }
  }
}
</style>